<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Data-Table 表格</title>
    <link rel="stylesheet" href="__STATIC__/frame/layui/css/layui.css">
    <!--<link rel="stylesheet" href="http://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">-->
    <link rel="stylesheet" href="__STATIC__/frame/static/css/style.css">
    <link rel="icon" href="__STATIC__/frame/static/image/code.png">
</head>
<body class="body">

<!-- 工具集 -->
<div class="my-btn-box">
    <span class="fl">
        <a class="layui-btn layui-btn-danger radius btn-delect" id="btn-delete-all">批量删除</a>
        <!--<a class="layui-btn btn-add btn-default" id="btn-add" data-href="{:url('index/create_question_bank')}">添加</a>-->
        <a class="layui-btn btn-add btn-default" id="btn-refresh"><i class="layui-icon">&#x1002;</i></a>
    </span>
</div>

<!-- 表格 -->
<div class="layui-row">
<table class="layui-table" style="width: 100%">
    <thead>
    <tr style="width: 50%">
        <th style="width: 1%;text-align: center">ID</th>
        <th style="text-align: center">题干</th>
        <th style="text-align: center">题目图片</th>
        <th style="text-align: center">答案</th>
        <th style="text-align: center">正确答案</th>
        <th style="text-align: center">获取金币</th>
        <th style="text-align: center">题目星等</th>
        <th style="text-align: center">题目类型</th>
        <th style="text-align: center">题目模式</th>
        <th style="text-align: center">操作</th>
    </tr>
    </thead>
    <tbody id="tbody">
    {foreach $data as $value}
    <tr>
        <td style="text-align: center"><input type="checkbox" value="{$value['id']}"></td>
        <td style="text-align: center">{$value['stem']}</td>
        <td style="text-align: center">
            {if $value['picture']}
            <img src="{:GetImg($value['picture'])}" width="50"/>
            {/if}
        </td>
        <td style="text-align: center">
            {php}$array = ["A","B","C","D","E","F","G"];{/php}
            {foreach $value['answer'] as $key=>$values}
            {$array[$key]}:{$values};
            {/foreach}
        </td>
        <td style="text-align: center">
            {$array[$value['right_key']]}
        </td>
        <td style="text-align: center">{$value['coin']}</td>
        <td style="text-align: center">{$value['difficulty']}</td>
        <td style="text-align: center">
            {if $value['status']==0}
            未审核
            {elseif $value['status']==1}
            已审核
            {elseif $value['status']==2}
            未解题目
            {/if}
        </td>
        <td style="text-align: center">{$value['type']}</td>
        <td style="text-align: center"><a href="javascript:;" title="通过审核" onclick="edit({$value['id']})"><i
                class="layui-icon">&#xe642;</i></a><a href="javascript:;" title="删除" style="margin-left: 10px" onclick="del({$value['id']})"><i class="layui-icon">&#xe640;</i></a></td>
    </tr>
{/foreach}
    </tbody>
</table>
</div>
<div style="text-align: center;width: 100%">
    <div id="test"></div>
</div>
<script type="text/javascript" src="__STATIC__/frame/layui/layui.all.js"></script>
<script type="text/javascript" src="__STATIC__/js/index.js"></script>
<script type="text/javascript" src="__STATIC__/js/jquery.3.3.1.min.js"></script>
<script type="text/javascript" src="__STATIC__/js/maowenke.js"></script>
<!-- 表格操作按钮集 -->
<script>
    $("[name=classid]").change(function () {
       var $id = $(this).val();
       getBranch($id);
    });
    $("[name=branchid]").change(function () {
        var $id = $(this).val();
        getBank($id);
    });
    $("[name=three_level]").change(function () {
        $("#tijiao").click();
    });
    $("#btn-add").click(function () {
        var $html = $(this).attr('data-href');
        layer.open({ type: 2,
            title:'添加题目',
            skin: 'layui-layer-rim', //加上边框
            area: ['500px', '700px'], //宽高
            content: $html,
            end:function () {
                window.location.reload();
            }
        });
    });
    $("#btn-refresh").click(function () {
        window.location.reload();
    });
    function del($id) {
        layer.confirm('你确定要删除吗？',{btn:['确定','取消']},function () {
            $.post("{:url('del/question_bank')}",{id:$id},function (data) {
                console.log(data);
                if(data.code==200){
                    layer.msg(data.msg);
                    getPage();
                }else{
                    layer.msg(data.msg);
                }
            })
        });

    };
    function edit($id) {
        layer.confirm('你确定要通过审核吗？',{btn:['确定','取消']},function () {
            $.post("{:url('api/shenghe')}",{id:$id},function (data) {
                console.log(data);
                if(data.code==200){
                    layer.msg(data.msg);
                    getPage();
                }else{
                    layer.msg(data.msg);
                }
            })
        });
    }
    $("#btn-delete-all").click(function () {
        var $id = getCheckbox($("[type=checkbox]"));
        layer.confirm('你确定要删除吗？',{btn:['确定','取消']},function () {
            var $branchid = $("[name=branchid]").val();
            $.post("{:url('del/question_bank')}",{id:$id,branchid:$branchid},function (data) {
                console.log(data);
                if(data.code==200){
                    layer.msg(data.msg);
                    getPage();
                }else{
                    layer.msg(data.msg);
                }
            })
        });
    });
    layui.use('laypage', function(){
        var laypage = layui.laypage;
        //执行一个laypage实例
        laypage.render({
            elem: 'test' //注意，这里的 test1 是 ID，不用加 # 号
            ,count: parseInt("{$datarow}") //数据总数，从服务端得到
            ,limits:[10,20,30,40,50]
            ,layout:['limit','prev','page','next']
            ,jump:function (obj,first) {
                if(!first){
                    getPage();
                }
            }
        });
    });
    function getPage() {
        var $limit = $(".layui-laypage-limits select").val();
        var $page  = $(".layui-laypage-curr").children('em').eq(1).text();
        $.post("{:url('page/weishenghe')}",{limit:$limit,page:$page},function (data) {
            console.log(data);
            if(data.code==200){
                if(!data.data.length){
                    window.location.reload();
                }
                $("#tbody").empty();
                var $str = '';
                var $array = ['A','B','C','D','E','F','G'];
                var $st   = '';
                var $stype = '';
                $.each(data.data,function (i,v) {
                    $st = $array[v.right_key];
                    $str +='<tr>'+
                        '<td style="text-align: center"><input type="checkbox" value="'+v.id+'"></td>'+
                        '<td style="text-align: center">'+v.stem+'</td>';
                    if(v.picture){
                        $str +='<td style="text-align: center"><img src="/uploads/'+v.picture+'" width="50"/></td>';
                    }else{
                        $str +='<td style="text-align: center"></td>';
                    }

                    $str+='<td style="text-align: center">';
                    $.each(v.answer,function (is,vs) {
                        $str += $array[is]+':'+vs+';';
                    });
                    $str +='</td>'+
                        '<td style="text-align: center">'+$st+'</td>'+
                        '<td style="text-align: center">'+v.coin+'</td>'+
                        '<td style="text-align: center">'+v.difficulty+'</td>';
                    if(v.status==1){
                        $str += '<td style="text-align: center">已审核</td>';
                    }else if(v.status==2){
                        $str += '<td style="text-align: center">未解题目</td>';
                    }else{
                        $str += '<td style="text-align: center">未审核</td>';
                    }

                    $str +='<td  style="text-align: center">'+toStr(v.type)+'</td><td style="text-align: center"><a href="javascript:;" title="通过审核" onclick="edit('+v.id+')"><i class="layui-icon">&#xe642;</i></a><a href="javascript:;" title="删除" style="margin-left: 10px" onclick="del('+v.id+')"><i class="layui-icon">&#xe640;</i></a></td>'+
                        '</tr>';
                });
                $("#tbody").append($str);
            }else{
layer.msg(data.msg);
            }

        })
    }
    function getBranch($id) {
        $.post("{:url('api/get_Branch')}",{id:$id},function (data) {
//            console.log(data);
            if(data.code==200){
                $("[name=branchid]").empty();
                var $str = '';
                $.each(data.data,function (i,v) {
                    $str +='<option value="'+v.id+'">'+v.branch_name+'</option>';
                });
                $("[name=branchid]").append($str);
                var $sid = $("[name=branchid]").val();
//                console.log($sid);
                getBank($sid);
            }
        })
    }
    function getBank($id) {
        $.post("{:url('api/getBank')}",{id:$id},function (data) {
            if(data.code==200){
                var $str = '';
                $("[name=three_level]").empty();
                $.each(data.data,function (i,v) {
                    $str += '<option value="'+v.id+'">'+v.three_level_name+'</option>';
                });
                $("[name=three_level]").append($str);
                $("#tijiao").click();
            }
        })
    }
</script>
</body>
</html>